<template>
  <cardBlock>
    <template #default>
      <a-form :model="form" :style="{ width: '600px' }" @submit="handleSubmit">
        <!-- 用户名 -->
        <a-form-item field="username" tooltip="请输入用户名" label="用户名">
          <a-input v-model="form.username" placeholder="请输入用户名" />
        </a-form-item>

        <!-- 密码 -->
        <a-form-item field="password" label="密码">
          <a-input v-model="form.password" placeholder="请输入密码" />
        </a-form-item>

        <!-- 邮箱 -->
        <a-form-item field="email" label="邮箱">
          <a-input v-model="form.email" placeholder="请输入邮箱" />
        </a-form-item>

        <!-- 电话 -->
        <a-form-item field="phonenumber" label="请输入联系方式">
          <a-input v-model="form.phonenumber" placeholder="请输入联系方式" />
        </a-form-item>

        <!-- 真实姓名 -->
        <a-form-item field="realname" label="真实姓名">
          <a-input v-model="form.realname" placeholder="请输入真实姓名" />
        </a-form-item>

        <a-form-item
          field="type"
          label="类型"
          :rules="[{ match: /one/, message: '必须选择一个' }]"
        >
          <a-radio-group v-model="form.role">
            <a-radio value="1">用户</a-radio>
            <a-radio value="2">商家</a-radio>
          </a-radio-group>
        </a-form-item>

        <template v-if="form.role === '2'">
          <!-- 简介 -->
          <a-form-item field="description" label="简介">
            <a-input v-model="form.description" placeholder="请输入商家简介" />
          </a-form-item>

          <!--  -->
          <a-form-item field="address" label="地址">
            <a-input v-model="form.address" placeholder="请输入地址" />
          </a-form-item>
        </template>

        <a-form-item>
          <a-button html-type="submit">提交</a-button>
        </a-form-item>
      </a-form>
    </template>
  </cardBlock>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import cardBlock from "@/components/common/card-block/index.vue";
import { loginRequest } from "@/utils/request";
import { Message } from "@arco-design/web-vue";

const form = reactive({
  username: "",
  password: "",
  email: "",
  realname: "",
  description: "",
  phonenumber: "",
  address: "",
  role: "1",
});

const handleSubmit = async () => {
  const test = await loginRequest.get("/user/1");
  console.log("test", test);
  let data = {
    username: form.username,
    password: form.password,
    email: form.email,
    phonenumber: form.phonenumber,
    realname: form.realname,
    role: +form.role,
  };

  if (form.role === "2") {
    data = Object.assign(data, {
      address: form.address,
      description: form.description,
    });
  }

  const res = await loginRequest.post("/user/add", data);

  if (res.data.code === 200) {
    Message.success("注册成功");
  } else {
    Message.error(res.data.msg);
  }
};
</script>
